import { ButtonDevOnly } from "@/component/ButtonDevOnly";
import { HighLightText } from "@/component/HighLightText";
import { IContactItem, IMessage } from "@/mgr";
import { show_raw_jsons } from "@/utils/show_raw_jsons";
import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
import { Flex, GetProps, List, Typography } from "antd";
import { useMemo } from "react";
import styles from "./styles.module.scss";
const { Text } = Typography

export interface IMessageItemProps extends GetProps<typeof List.Item> {
  contacts?: readonly IContactItem[];
  item: IMessage;
  show_time?: boolean;
  show_content?: boolean;
  show_account?: boolean;
  searching_value?: Unsafe<string>;
}
export function MessageItem(props: IMessageItemProps) {
  const {
    item,
    contacts,
    searching_value,
    show_time = true,
    show_content = true,
    show_account,
    ..._p
  } = props

  const contact_info = contacts?.find(v => v.userName === item.raw?.sender)

  const flag = [
    item.sender?.name,
    contact_info?.remark,
    contact_info?.isFriend,
    contact_info?.alias,
    item.content,
    item.timestamp,
    show_time,
    show_content,
    show_account,
    searching_value,
  ].join()

  const [title_node, desc_node] = useMemo(() => {
    const is_self = item.raw?.isSelf === true;
    const talker_str = item.raw?.talkerName || ''
    const talker = <HighLightText search={searching_value}>{talker_str}</HighLightText>
    const sender_str = item.raw?.senderName || ''
    const account_str = item.raw?.account || ''
    const account = <HighLightText search={searching_value}>{account_str}</HighLightText>
    const content_str = (sender_str !== talker_str ? `${sender_str}: ` : '') + (item.content || ' ')
    const content = <HighLightText search={searching_value}>{content_str}</HighLightText>
    const title_node = (
      <Flex justify='space-between' gap={10}>
        <Text className={styles.title}>
          {account}
          {' '}
          {
            is_self ? <>
              <ArrowRightOutlined />
              <ArrowRightOutlined />
              <ArrowRightOutlined />
            </> : <>
              <ArrowLeftOutlined />
              <ArrowLeftOutlined />
              <ArrowLeftOutlined />
            </>
          }
          {' '}
          {talker}
        </Text>
        <Text type='secondary' title={item.raw?.time} className={styles.n_time}>
          {item.raw?.time}
        </Text>
      </Flex>
    )
    const desc_node = (
      <Flex justify='space-between' gap={10}>
        <Text type='secondary' title={content_str}>{content}</Text>
        <Flex gap={10} style={{ flexShrink: 0 }}>
          <ButtonDevOnly label='原始数据' onClick={(e: React.MouseEvent) => {
            e.stopPropagation();
            e.preventDefault();
            show_raw_jsons([['', item]])
          }} />
        </Flex>
      </Flex>
    )
    return [title_node, desc_node]
  }, [contacts, flag])

  return useMemo(() => (
    <List.Item
      id={styles.sesson_list_item}
      {..._p}>
      <List.Item.Meta
        title={title_node}
        description={desc_node}
      />
    </List.Item >
  ), [item, contact_info])
}


